/*
 * SPDX-FileCopyrightText: 2026 Lily Linck <lily-linck@murena.io>
 *
 * SPDX-License-Identifier: LGPL-3.0-or-later
 */

@font-face {
	font-family: "Crafty Girls";
	src: url("../fonts/calligraphy/crafty_girls/CraftyGirls.woff2");
}

@font-face {
	font-family: "Flaemische Kanzleischrift";
	src: url("../fonts/calligraphy/flaemische-kanzleischrift/Flaemische\ Kanzleischrift.woff2");
}

@font-face {
	font-family: "Lorem Ipsum";
	src: url("../fonts/outline/lorem_ipsum/LoremIpsum.woff2");
}

/* Light Colors / Dark Colors */
:root {
	--background-normal: light-dark(#bfa6d9, #1a1221);
	--background-light: light-dark(#b385e0, #251b31);
	--background-lighter: light-dark(#804db2, #47305f);
	--background-dark: light-dark(#c5b8d6, #130e1a);
	--background-darker: light-dark(#e0cbf6, #0a080d);

	--background-normal-alpha: light-dark(#bfa6d964, #1a122164);
	--background-light-alpha: light-dark(#b385e0a0, #251b31a0);
	--background-lighter-alpha: light-dark(#804db2a0, #47305fa0);
	--background-dark-alpha: light-dark(#c5b8d6a0, #130e1aa0);
	--background-darker-alpha: light-dark(#e0cbf6a0, #0a080da0);

	--text: light-dark(#2a1c3a, #c7abe3);
	--text-light: light-dark(#0f091a, #efefef);
	--text-lighter: light-dark(#0a070e, white);
	--text-dark: light-dark(#542c77, #b385e0);
	--text-darker: light-dark(#693a98, #866c9d);

	--accent: light-dark(#5e08b5, #9229ff);
	--accent-light: light-dark(#470788, #9d47fa);
	--accent-lighter: light-dark(#3e0774, #af75f0);
	--accent-dark: light-dark(#6319ae, #8119ec);
	--accent-darker: light-dark(#8730d4, #5a0ab3);

	font-family: "Crafty Girls";
	font-size: 16px;
}

html,
.bg_normal,
.bg_light,
.bg_lighter,
.bg_dark,
.bg_darker,
.bg_normal_alpha,
.bg_light_alpha,
.bg_lighter_alpha,
.bg_dark_alpha,
.bg_darker_alpha {
	transition-duration: var(--transition-duration);
	transition-property: background-color, color;
	transition-timing-function: ease;
}

h1,
h2,
h3,
h4,
h5,
h6,
*.title {
	font-family: "Flaemische Kanzleischrift";
	font-weight: normal;
}

h1,
*.title {
	font-size: 4em;
}
h2 {
	font-size: 3em;
}
h3,
#site_attribution h2 {
	color: var(--text-darker);
	font-size: 1.5em;
	font-family: "Crafty Girls";
}

#project_title {
	color: white;
	text-align: center;
	line-height: 1em;
	font-size: 6rem;
	margin-bottom: 2rem;
	text-shadow:
		-1px -1px 0 var(--background-dark),
		1px -1px 0 var(--background-dark),
		-1px 1px 0 var(--background-dark),
		1px 1px 0 var(--background-dark);
	transition-duration: var(--transition-duration);
	transition-property: color, text-shadow;
	transition-timing-function: ease;
}

#project_subtitle {
	color: var(--text);
	display: block;
	font-family: "Lorem Ipsum";
	font-size: 0.5em;
	margin-bottom: -1em;
}

#site_navigation {
	backdrop-filter: blur(2px);
	padding: 0.5em;
	position: sticky;
	text-shadow:
		-1px -1px 1px var(--background-dark),
		1px -1px 1px var(--background-dark),
		-1px 1px 1px var(--background-dark),
		1px 1px 1px var(--background-dark);
	top: 0;
}

#site_navigation > ul {
	display: grid;
	margin: 0;
	padding: 0;
}

#site_navigation li {
	font-size: 1.25em;
	grid-row: 1;
	list-style: none;
	text-align: center;
}
#site_navigation li:first-child {
	text-align: left;
}
#site_navigation li:last-child {
	text-align: right;
}

/* Theme Selector */
#theme_selector {
	cursor: pointer;
	display: inline-block;
	height: 24px;
	position: relative;
	vertical-align: middle;
	width: 24px;
}
#theme_selector input,
#theme_selector label::after,
#theme_selector label::before {
	display: none;
}
#theme_selector label {
	cursor: inherit;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	z-index: 1;
}
#theme_selector label:not(:has(input:checked)) {
	opacity: 1;
	z-index: 2;
}

.light_image,
.dark_image {
	transition-duration: var(--transition-duration);
	transition-property: opacity;
	transition-timing-function: ease;
}

html:has(#theme_selector input[value="dark"]:checked) {
	color-scheme: dark;
}
html:has(#theme_selector input[value="dark"]:checked) .light_image {
	opacity: 0;
}
html:has(#theme_selector input[value="dark"]:checked) .dark_image {
	opacity: 1;
}

html:has(#theme_selector input[value="light"]:checked) {
	color-scheme: light;
}
html:has(#theme_selector input[value="light"]:checked) .light_image {
	opacity: 1;
}
html:has(#theme_selector input[value="light"]:checked) .dark_image {
	opacity: 0;
}

@media (prefers-color-scheme: dark) {
	#theme_selector:not(:has(input:checked)) label:has(input[value="dark"]) {
		opacity: 0;
	}
}
@media (prefers-color-scheme: light) {
	#theme_selector:not(:has(input:checked)) label:has(input[value="light"]) {
		opacity: 0;
	}
}

a {
	font-weight: bold;
	transition-property: color, text-shadow;
}
a:visited:not(:hover):not(:active):not(.selected) {
	color: var(--accent);
}
a.selected:not(:active) {
	color: var(--accent-lighter);
}

.center_block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.image_switch {
	position: relative;
}

.image_switch > img {
	left: 0;
	position: absolute;
	top: 0;
}

section:not(:last-child) {
	border-bottom: 1px solid var(--text-dark);
}

*.section_banner {
	max-width: 520px;
}

.inline_block {
	display: inline-block;
}

li > ul {
	margin: 0;
}

div.section_flex,
#site_attribution {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

div.section_flex > div,
#site_attribution > div {
	max-width: 520px;
}

#site_attribution {
	justify-content: space-between;
}
#site_attribution div > ul {
	padding-left: 0;
}
#site_attribution ul {
	list-style: none;
}
#site_attribution li > ul {
	display: grid;
}
#site_attribution li > ul > li {
	grid-row: 1;
}

#site_attribution + *.return_top {
	bottom: 15rem;
}

#lily_css {
	width: 128px;
	height: 128px;
}

#authors_page div.section_flex > div {
	max-width: 288px;
}

#authors_page > #project > div.section_flex > div {
	max-width: 352px;
}

#authors_page figure {
	border: 1px solid;
	border-color: var(--background-light);
}

#authors_page figure > img {
	height: 320px;
	object-fit: cover;
	object-position: center;
	width: 320px;
}

#authors_page #external figure {
	height: 258px;
	width: 258px;
}
#authors_page #external figure > img {
	height: 256px;
	width: 256px;
}

#authors_page section:has(.section_flex:last-child) {
	padding-bottom: var(--padding-size);
}

#authors_page .non_square > img {
	object-fit: contain;
}